<template>
  <div class="user-layout">
    <!-- 左侧菜单栏 -->
    <aside class="sidebar">
      <ul>
        <li
          v-for="item in filteredMenu"
          :key="item.key"
          :class="{ active: currentTab === item.key }"
          @click="currentTab = item.key"
        >
          {{ item.label }}
        </li>
      </ul>
    </aside>

    <!-- 右侧内容区域 -->
    <main class="content">
      <component :is="currentComponent" />
    </main>
  </div>
</template>

<script>
import { markRaw } from 'vue'
import { useUserStore } from '@/stores/user'
import ProfileForm from '@/components/ProfileForm.vue'
import PasswordForm from '@/components/PasswordForm.vue'
import UserManager from '@/components/UserManager.vue'

export default {
  data() {
    return {
      currentTab: null,
      menuConfig: [
        { key: 'profile', label: '个人资料', component: markRaw(ProfileForm), roles: ['ROLE_STUDENT', 'ROLE_TEACHER', 'ROLE_ADMIN'] },
        { key: 'password', label: '密码修改', component: markRaw(PasswordForm), roles: ['ROLE_STUDENT', 'ROLE_TEACHER', 'ROLE_ADMIN'] },
        { key: 'usermanager', label: '用户管理', component: markRaw(UserManager), roles: [ 'ROLE_ADMIN'] },   
        { key: 'studentinfo', label: '学生资料', component: markRaw(ProfileForm), roles: ['ROLE_STUDENT'] },
        { key: 'teacherinfo', label: '教师资料', component: markRaw(ProfileForm), roles: ['ROLE_TEACHER'] },
      ]
    }
  },
  computed: {
    userStore() {
      return useUserStore()
    },
    filteredMenu() {
      return this.menuConfig.filter(item =>
        item.roles.includes(this.userStore.currentRole)
      )
    },
    currentComponent() {
      const item = this.menuConfig.find(m => m.key === this.currentTab)
      return item ? item.component : null
    }
  },
  created() {
    if (this.filteredMenu.length > 0) {
      this.currentTab = this.filteredMenu[0].key
    }
  }
}
</script>

<style scoped>
@import '../styles/LayoutCommon.css';
</style>
